import styles from './index.module.css'
import { useState, useEffect, useMemo } from 'react'
import CitySelect from './CitySelect'
import dayjs from 'dayjs'

console.log(dayjs().add(0, 'day').format('YYYY-MM-DD'))

/**
 * 
 * @param {*} city 要查国内哪个城市
 * @param {*} days  天气预报几天
 * @returns 
 * 
 * 参考文档: https://openweathermap.org/forecast16#fields_JSON
 */
// const APPID
// city: 要查国内哪个城市, days: 天气预报几天
const fetchData = (city, days=7)=>{
    const APPID = '92007f6d93f709e2a6a925be9164d9d1'
    // city='Shanghai'
    //  city='Guangzhou'
    //  city='Hangzhou'
    return new Promise((resolve, reject)=>{
        return fetch(`https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&cnt=${days}&units=metric&appid=${APPID}&lang=zh_cn`).then(json=>{
            json.json().then(resolve);
        }).catch(reject)
    });
}


export default ()=>{

    const [city, setCity] = useState('Shanghai')
    const [dayList, setDayList]= useState([]) // 未来几天的天气值
    const [currDay, setCurrDay] = useState(0) // 默认选择今天

    const nowDay = useMemo(()=>{
        return dayList[currDay]
    }, [currDay, dayList])

    useEffect(()=>{
        const runEffect = async()=>{
            let res = await fetchData(city)
            // console.log('res: ', res.list)
            setDayList( res.list )
        }

        runEffect();
    }, [city]);

    return (
        <div className={styles['page']} >
            <div>选择城市: <CitySelect city={city} onChange={(_city)=>{
                setCity(_city)
                setCurrDay(0) // 从第0天开始
            }} /></div>
            <div>
                <div className={styles['day']} >
                    <div className={styles['city']} >{city}</div>
                    {nowDay && (
                        <div className={styles['temp']} >
                            {nowDay.temp.day}°C
                        </div>
                    )}
                    {nowDay && <div className={`${styles[nowDay.rain?'rain':'sun']}  ${styles['fz18']}`} >{nowDay.rain ? '雨': '晴'}</div>}
                    {
                        nowDay && (
                            <div>
                                <div>风速: {nowDay.speed}米/秒</div>
                                <div>湿度: {nowDay.humidity}%</div>
                            </div>
                        )
                    }
                </div>
                <div className={styles['scroll-container']} >
                    {
                        dayList.map( (dayObj, dayIndex)=>{
                            return (
                                <div 
                                    key={dayObj.dt} 
                                    className={`${styles['scroll-container-item']} ${styles[currDay===dayIndex ? 'active': '']}`}
                                    onClick={()=>{
                                        setCurrDay(dayIndex)
                                    }}
                                >
                                    <div>{dayjs().add(dayIndex, 'day').format('MM-DD')}</div>
                                    <div className={styles[dayObj.rain?'rain':'sun']} >{dayObj.rain ? '雨': '晴'}</div>
                                    <div>{dayObj.temp.max}°C</div>
                                    <div>{dayObj.temp.min}°C</div>
                                </div>
                            )
                        } )
                    }
                </div>
            </div>
        </div>
    )
}